<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags"%>
<%@ include file="/page/company/comHeader.jsp" %>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企业菜单收益</title>
<script type="text/javascript" src="<%=basePath %>js/exporting.js"></script>
<script type="text/javascript" src="<%=basePath %>js/highcharts.4.1.4.js"></script>
<script type="text/javascript" src="<%=basePath%>js/tablecreate/jlinq.js"></script>
<script type="text/javascript" src="<%=basePath%>js/tablecreate/jquery-dynamicTable.js"></script>
<script type="text/javascript" src="<%=basePath%>js/tablecreate/pager.js"></script> 
<script type="text/javascript" src="<%=basePath%>js/tablecreate/modal.js"></script>
<script type="text/javascript">
function menuNum(){
	var date=$("#selDate").val();
	if(date!=null){
		 var sDate=date.substring(0,(date.length-1)/2);
		 var eDate=date.substring((date.length+1)/2,date.length);
		}else{
			var sDate=$("#sDate").val();
			var eDate=$("#eDate").val();
			}
	var postData={comId:$("#comId").val(),menuName:$("#menuName").val(),s_date:sDate,e_date:eDate}
	$(function () {
		 var url = 'commps_menuNumReport';
			$.post(url,postData,function(response) {
				num = response.totalnum;
				date=response.date;
				menuname=response.menuName;
	       $('#menunum').highcharts({
	    	   chart: {
	               type: 'column',
	               margin: [ 50, 50, 100, 80]
	           },
	        title: {
	            text: '菜单销量分析',
	        },
	        subtitle: {
	            text: 'Source:e9ding.com',
	        },
	        xAxis: {
	            categories: menuname,
	            labels: {
	                rotation: -45,
	                align: 'right',
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif'
	                }
	            }
	        },
	        yAxis: {
	        	 min: 0,
	            title: {
	                text: '销量(份) '
	            },
	            plotLines: [{
	                value: 0,
	                width: 1,
	                color: '#808080'
	            }]
	        },
	        legend: {
	            enabled: false
	        },
	        tooltip: {
	            pointFormat: '销量: <b>{point.y:.1f} 份</b>',
	        },
	        series: [{
	            name: 'Population',
	            data: num,
	            dataLabels: {
	                enabled: true,
	                rotation: -90,
	                color: '#FFFFFF',
	                align: 'right',
	                x: 4,
	                y: 10,
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif',
	                    textShadow: '0 0 3px black'
	                }
	            }
	        }]
	    });
	}, "json");  
		});
}
function menuProfit(){
	var date=$("#selDate").val();
	if(date!=null){
		 var sDate=date.substring(0,(date.length-1)/2);
		 var eDate=date.substring((date.length+1)/2,date.length);
		}else{
			var sDate=$("#sDate").val();
			var eDate=$("#eDate").val();
			}
	var postData={comId:$("#comId").val(),menuName:$("#menuName").val(),s_date:sDate,e_date:eDate}
	$(function () {
		 var url = 'commps_menuProfitReport';
			$.post(url,postData,function(response) {
				profit = response.profit;
				date=response.date;
				menuname=response.menuName;
	       $('#menuprofit').highcharts({
	    	   chart: {
	               type: 'column',
	               margin: [ 50, 50, 100, 80]
	           },
	        title: {
	            text: '菜单收益分析',
	        },
	        subtitle: {
	            text: 'Source:e9ding.com',
	        },
	        xAxis: {
	            categories: menuname,
	            labels: {
	                rotation: -45,
	                align: 'right',
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif'
	                }
	            }
	        },
	        yAxis: {
	        	 min: 0,
	            title: {
	                text: '收益(￥) '
	            },
	            plotLines: [{
	                value: 0,
	                width: 1,
	                color: '#808080'
	            }]
	        },
	        legend: {
	            enabled: false
	        },
	        tooltip: {
	            pointFormat: '收益: <b>{point.y:.1f} ￥</b>',
	        },
	        series: [{
	            name: 'Population',
	            data: profit,
	            dataLabels: {
	                enabled: true,
	                rotation: -90,
	                color: '#FFFFFF',
	                align: 'right',
	                x: 4,
	                y: 10,
	                style: {
	                    fontSize: '13px',
	                    fontFamily: 'Verdana, sans-serif',
	                    textShadow: '0 0 3px black'
	                }
	            }
	        }]
	    });
	}, "json");  
		});
}
function search(){
	menuProfit();menuNum();
}
</script>
<sb:head/>
<style type="text/css">
.span6{
border: #1e90ff 2px solid;
width: 300px;height: 200px;
}
</style>
</head>
<body>
<h3>菜单收益分析</h3>
<s:hidden value="%{#session.company.comId}" id="comId"></s:hidden>
<%-- <s:hidden value="40283f814cee7913014cee79a9b80000" id="comId"></s:hidden> --%>
<div class="row-fluid" style="width:100%;height:36px;background:url(<%=basePath%>/image/gridbar.gif) repeat-x;">
<div style="background:url(<%=basePath%>/image/gridbar.gif) repeat-x;width: 500px;height:36px;float:left;">
<input placeholder="请输入菜单名称" id="menuName" class="input-medium search-query" name="menuName" value=""/>
<input type="button" class="btn btn-success" id="" onclick="searchList();search();" value="查询"/>
&nbsp;&nbsp;
<img alt="" src="<%=basePath%>/image/download.png" onclick="cpsexcel()"/>
</div>
<div style="background:url(<%=basePath%>/image/gridbar.gif) repeat-x;width: 360px;height:36px;float:right;">
<select id="selDate" onchange="searchListByselDate();search();" style="width: 80px;height: 80%" >
<option value="">时间</option>
<option value='<s:property value="dateMap.currDate"/>-<s:property value="dateMap.currDate"/>'>今天</option>
<option value='<s:property value="dateMap.yesterday"/>-<s:property value="dateMap.currDate"/>'>昨天</option>
<option value='<s:property value="dateMap.day7"/>-<s:property value="dateMap.currDate"/>'>最近7天</option>
<option value="<s:property value="dateMap.day15"/>-<s:property value="dateMap.currDate"/>">最近15天</option>
<option value="<s:property value="dateMap.currMonth"/>-<s:property value="dateMap.currDate"/>">本月</option>
<option value="<s:property value="dateMap.upstartmonth"/>-<s:property value="dateMap.upendmonth"/>">上月</option>
</select>
<input placeholder="起始时间" id="sDate" type="text"  value='<s:property value='s_date'/>' style="width: 120px;height: 80%" onClick="WdatePicker()"/><input placeholder="结束时间" value='<s:property value='e_date'/>' onchange="search();searchListByDate();" id="eDate" style="width: 120px;height: 80%" type="text" onClick="WdatePicker()"/>
<img style="margin-top: -10px;" width="30px;" height="35px;" alt="" src="<%=basePath%>js/datepicker/skin/datePicker.gif">
</div>
</div>
<div class="container-fluid" style="height: 715px;">
	<div class="row-fluid" style="height: 300px;">
		<div class="span6" id="menuprofit" style="height: 300px;" >
		</div>
		<script type="text/javascript">
		menuProfit();
		</script>
		<div class="span6" id="menunum" style="height: 300px;"></div>
		<script type="text/javascript">
		menuNum();
		</script>
	</div>
	<div class="row-fluid" style="height: 10px;"></div>
	<div class="row-fluid" style="height: 300px;" id="lists">
	<div id="list" ></div>
   <div id="page"></div>
	</div>
<script type="text/javascript">
var comId=$("#comId").val();
var url=[{loadUrl:"commps_getComMPS?comId="+comId,editUrl:"",stopUrl:""}];//请求地址
var postData={menuName:$("#menuName").val()};
var pageId="page";
var objClassName="list_light";
var objColumn = [//这里应该还有加上企业收益
                    { ColumnName: "日期", DataId: "sDate", Width: 100, DataAlign: "left", Format: null, OnClick: null },
                    { ColumnName: "菜单名称", DataId: "menuName", Width: 100, DataAlign: "left", Format: null, OnClick: null },
					{ ColumnName: "菜单收益", DataId: "comTotalProfit", Width: 100, DataAlign: "left", Format: null, OnClick: null },
					{ ColumnName: "销量", DataId: "totalNum", Width: 100, DataAlign: "left", Format: null, OnClick: null },
                 ];
comMPSList();
function comMPSList(){
	   $.ajax({
			type: "post",
	        url: url[0].loadUrl,
	        data: postData,
	        dataType: "json",
	        success: function(data){
          var objData = new Array(data.list.length);
          for(var i=0;i<data.list.length;i++){
        	  objData[i]={sDate:data.list[i].sDate,menuName:data.list[i].menuName,
                	  comTotalProfit:data.list[i].profit,
        			  totalNum:data.list[i].totalNum}; 
              }
               $("#list").MakeTable(objColumn, objData, objClassName);
        	  $("#page").MakePage(data.page[0]);
		        }
			});
	   }
function searchList(){
	var page=$("#selPage").val();
	var pageRow=$("#selRow").val();
	postData={menuName:$("#menuName").val(),initPage:page,pageRow:pageRow};
	comMPSList();
}
var j=0;
function OrderSort(order){
	var order=order;
	j++;
	if(j%2==0){
          var sort="desc";
		}else if (j%3==0) {
			var sort="asc";
		}else{
      order="created";
      var sort="desc";
			}
	var page=$("#selPage").val();
	var pageRow=$("#selRow").val();
	postData={order:order,sort:sort,initPage:page,pageRow:pageRow};
	comMPSList();
}
function goPage(){
	var page=$("#selPage").val();
	var pageRow=$("#selRow").val();
	postData={initPage:page,pageRow:pageRow};
	comMPSList();
}
function changePage(page){
	var pageRow=$("#selRow").val();
	postData={initPage:page,pageRow:pageRow};
	comMPSList();
}
function goRow(){
	var pageRow=$("#selRow").val();
	var page=$("#selPage").val();
	comMPSList();
}
function searchListByselDate(){
    var date=$("#selDate").val();
  //  alert(date);
    var sDate=date.substring(0,(date.length-1)/2);
    var eDate=date.substring((date.length+1)/2,date.length);
    ///alert(sDate);alert(eDate);
    var page=$("#selPage").val();
	var pageRow=$("#selRow").val();
	postData={s_date:sDate,e_date:eDate,initPage:page,pageRow:pageRow};
	comMPSList();
}
function searchListByDate(){
	var sDate=$("#sDate").val();
	var eDate=$("#eDate").val();
	//alert(sDate);alert(eDate);
	var page=$("#selPage").val();
	var pageRow=$("#selRow").val();
	postData={s_date:sDate,e_date:eDate,initPage:page,pageRow:pageRow};
	comMPSList();
}
function cpsexcel(){
	var comName=$("#comName").val();
	 var date=$("#selDate").val();
	 if(date!=null){
		    var sDate=date.substring(0,(date.length-1)/2);
		    var eDate=date.substring((date.length+1)/2,date.length);
		 }else{
			   var sDate=$("#sDate").val();
				var eDate=$("#eDate").val();
			 }
	  //  alert(date);
	    
	window.location.href="cps_CPSExcel?comName="+comName+"&s_date="+sDate+"&e_date="+eDate;
}
</script>
</div>
<%@ include file="/page/common/modal.jsp"%>
<jsp:include page="/page/company/comFooter.jsp"></jsp:include>
</body>
</html>